//drag & drop view
require('/view');
$.ddview = function(key, name) {
  var msgbox = new $.view(key, name)
  var msglog = msgbox.find('.' + name + '-view').first()

  msglog.addClass('drag-and-drop-view-log, ui-widget-content')

  msgbox.afterAddElement = function (element) {
    console.log('afterAddElement ddview')    
    element.draggable({
      //connectToSortable: ".drag-and-drop-view-log",
      helper: 'clone'
    }).disableSelection()
  }

  msgbox.afterCreateView = function (view) {
    console.log('afterCreateView ddview')    
    msglog.disableSelection()
  }

  msgbox.beforeDropElement = function(element) {
    console.log('beforDropElement ddview')
    return true
  }

  msgbox.afterDropElement = function(element) {
    console.log('afterDropElement ddview')
    return true
  }

  msglog./*sortable({
    beforeStop: function(event, ui) { 
      console.log('beforeStop ddview')
      msgbox.beforeDropElement(ui) 
    }
  }).*/droppable({
      drop: function( event, ui ) {
        console.log('drop ddview')
        msgbox.afterDropElement(ui.draggable)
      },
      accept: function(draggable) {
        console.log('accept ddview')
        return msgbox.beforeDropElement(draggable) 
      },
      //activeClass: "ui-state-active",
      hoverClass: "ui-state-hover",
    });

  return msgbox
}

// Private functions
